<template>
  <div id="login-container">
    <div class="projectName-container">
      <h1>榆林处理厂智能管理中心</h1>
    </div>
    <div class="loginForm-container">
      <div class="loginForm">
        <div class="loginTitle">账号登录</div>
        <el-form class="Form">
          <el-form-item prop="user_code">
            <el-input v-model="ruleForm.account" prefix-icon="User"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" prefix-icon="Lock" type="password" show-password/>
          </el-form-item>
          <el-form-item prop="rememberMe">
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted} from 'vue';
import router from '../router';
import ASE from '../utils/ASE';
import axios from 'axios';
import {ElMessage} from 'element-plus'

onMounted(() => {

})

const ruleForm = reactive({
  account: '',
  password: '',
});
const login = async function () {
  if (ruleForm.account !== '' && ruleForm.password !== '') {
    let base = ASE.encrypt(JSON.stringify(ruleForm))
    let random = ASE.encrypt(JSON.stringify(Math.round(Math.random() * 100000000000) + '非常规作业许可管理'))
    let {data: res} = await axios.post('http://10.78.1.11:8088/api/Constructor/sysloginapi/userlogin', {
      account: base,
      password: random
    })
    if (!res.data || !res.data.ret) {
      return ElMessage({
        icon: 'error',
        message: '登录失败!用户名或密码错误!',
        customClass: 'Message'
      })
    }
    sessionStorage.setItem('UserInfo', ASE.decrypt(res.data.data.data))
    router.push('/largeScreen');
  } else {
    return ElMessage({
      message: '请输入账号密码!',
      icon: 'error',
      customClass: 'Message'
    })
  }
}
</script>

<style lang="scss" scoped>
#login-container {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/login/background.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;


  .projectName-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;

    h1 {
      font-size: 40px;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .loginForm-container {
    width: 900px;
    height: 400px;
    border-radius: 10px;
    position: absolute;
    top: 45%;
    left: 65%;
    transform: translate(-50%, -50%);

    .loginForm {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      background: #ffffff;
      overflow: hidden;
      width: 345px;
      border-radius: 10px;

      .loginTitle {
        width: 100%;
        text-align: center;
        font-size: 20px;
        color: #3f3f40;
        margin-top: 15px;
      }

      .Form {
        padding: 20px 30px;
      }

      button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
<style>
.Message {
  .el-icon {
    width: 20px;
    height: 20px;
  }
}
</style>
